<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item  v-for="(item,index) in img" :key="index">
				<!-- <image :src="item.src" mode=""></image> -->
				<image src="../../static/22.png" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="" v-for="(item,index) in list" :key="index">
			<view class="ab">
				<text class="aaa">￥{{item.sell_price}}</text>
				<text class="bbb">￥{{item.market_price}}</text>
			</view>
			<view class="title">
				<text>{{item.title}}</text>
			</view>
			<view class="one"></view>
			<view class="title">
				<text>货号:{{item.goods_no}}</text>
			</view>
			<view class="title">
				<text>库存:{{item.stock_quantity}}</text>
			</view>
			<view class="one"></view>
			<view class="ttt">详情介绍</view>
			<view class="guding">
			<!-- 客服店铺购物车加入购物车立即购买 -->
				<text>客服</text>
				<text>店铺</text>
				<text>购物车</text>
				<view class="anniu">
				<text>加入购物</text>
				<text>立即购买</text>
			</view>
		</view>
		</view>
		<view class="mmm"v-for="(item,index) in index" :key="item.id">
			<rich-text :nodes="item.content"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				list:[],
				img:[],
				index:[],
			}
		},
		onLoad(option) {
			this.id = option.id
			// console.log(this.id)
			this.image()
			this.getlist()
			this.getindex()
		},
		methods: {
			// 获取详情轮播图片数据
			async image (){
				const {message} = await uni.$Http.get(`getthumimages/${this.id}`)
				this.img = message
			},
			// 获取详情数据
			async getlist (){
				const {message} = await uni.$Http.get(`goods/getinfo/${this.id}`)
				this.list = message
			},
			// 获取详情介绍
			async getindex(){
				const {message} = await uni.$Http.get(`goods/getdesc/${this.id}`)
				this.index = message
				console.log(message)
			},
		}
	}
</script>

<style>
	swiper{
		height: 235px;
	}
.one{
	width: 100%;
	height: 2px;
	background-color: #8F8F94;
}
.aaa{
	color: red;
	font-size: 20px;
}
.bbb{
		text-decoration: line-through;
}
.title{
	/* border: 1px solid red; */
	margin-top: 7px;
	margin-bottom: 7px;
}
.ttt{
	margin-top: 10px;
	margin-bottom: 10px;
	/* border: 1px solid red; */
	/* height: 30px; */
}
.ddd{
	border: 1px solid red;
	width: 100%;
	height: 69px;
	position: fixed;
	background-color: #FFFFFF;
}
.guding {
		width: 100%;
		height: 100rpx;
		border: 1px solid #733A36;
		background-color: #ffffff;
		position: fixed;
		display: flex;
		bottom: 0px;
	}
	.guding text {
		display: block;
		color: #666666;
		/* margin-top: 15rpx; */
		width: 125rpx;
		line-height: 113rpx;
		height: 80rpx;
		text-align: center;
	}
	
	.anniu{
		display: flex;
	}
	.anniu text:nth-of-type(1) {
		width: 180rpx;
		height: 100rpx;
		background-color: #FF0000;
		color: #FFFFFF;
		line-height: 99rpx;
		border-radius: 48px 0px 0px 46px;
	}
	.anniu text:nth-of-type(2) {
		width: 180rpx;
		height: 100rpx;
		line-height: 94rpx;
		background-color: #FFA200;
		color: #FFFFFF;
		border-radius: 0px 28px 32px 0px;
	}
	.mmm{
		font-size: 14px;
	}
</style>
